<style>
</style>
<div class="layui-card">
    <!---->
    <div class="layui-header notselect">
        <div class="pull-left"><span>分类</span></div>
        <div class="pull-right margin-right-15 nowrap">
            <button data-modal="/shop/classify/addClassify" data-title="添加分类"
                    class="layui-btn layui-btn-sm layui-btn-primary">添加分类
            </button>
        </div>
    </div>
    <div class="layui-card-body">
        <form autocomplete="off" class="layui-form layui-form-pane form-search" onsubmit="return false;">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">编码</label>
                <div class="layui-input-inline">
                    <input id="code" name="code" value="" placeholder="编码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <button class="layui-btn layui-btn-primary" onclick="doClassifySearch();"><i class="layui-icon">&#xe615;</i>
                    搜 索
                </button>
            </div>
        </form>
        <script type="text/html" id="barTool">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script type="text/html" id="imageTemplate">
            <img width="40px" height="40px" src="{{ d.icon }}" data-tips-image="{{ d.icon }}"/>
        </script>
        <table class="layui-hide" id="classifyTable" lay-filter="classifyTable"></table>
    </div>
</div>
<script>
    var table;
    layui.use('table', function () {
        table = layui.table;
    });
    initClassify();

    function initClassify() {
        table.render({
            elem: '#classifyTable'
            , url: '/shop/classify/ajax_list'
            , title: '用户数据表'
            , totalRow: true
            , page: true
            , id: 'idTest'
            , cols: [[
                {field: 'id', title: 'ID'}
                , {field: 'sort', title: '排序值'}
                , {field: 'code', title: '编码'}
                , {field: 'name', title: '名称'}
                , {field: 'code', title: '分类图标,', templet: '#imageTemplate'}
                , {fixed: 'right', title: '操作', toolbar: '#barTool',}
            ]]
            , response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            where: {code: $("#code").val()}
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                console.info(res)
                return {
                    "code": res.errorCode, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.totalElements, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
        });
        //监听行工具事件
        table.on('tool(classifyTable)', function (obj) {
            var data = obj.data;
            console.log(data)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.form.load("/shop/classify/ajax_del", {id: data.id});
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                $.form.modal("/shop/classify/editClassify", {id: data.id}, "编辑");
            }
        });

    }

    function doClassifySearch() {
        initClassify();
    }
</script>